<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <link rel="stylesheet" href="${ctx}/statics/less/secondPage.css">
    <title>四阶</title>
</head>
<body>
<section class="fourthPage print-wrap">
    <div class="filters no-print">
        <form action="#" class="layui-form" >
            <div class="layui-form-item">
                <div class="layui-inline">
                    <label class="layui-form-label">过账日期</label>
                    <div class="layui-input-inline">
                        <input type="text" name="startTime" id="startTime" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid">~</div>
                    <div class="layui-input-inline">
                        <input type="text" name="endTime" id="endTime" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">站别</label>
                    <div class="layui-input-inline">
                        <div id="station" name="station" xm-select></div>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">型别</label>
                    <div class="layui-input-inline">
                        <div id="type" name="type" xm-select></div>
                    </div>
                </div>
                <div class="layui-inline">
                    <div class="layui-btn-group">
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm" lay-submit lay-filter="formSearch"><i class="layui-icon layui-icon-search"></i> 查询</button>
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm exportBtn"><i class="layui-icon layui-icon-export"></i> 导出</button>
                        <button type="button" class="layui-btn layui-btn-primary layui-btn-sm printBtn"><i class="layui-icon layui-icon-print"></i> 打印</button>
                    </div>
                </div>
            </div>

        </form>
    </div>
    <div class="data-table">
        <table id="dataTable" class="printhide"></table>
        <div class="dataTable pttable printshow">
            <table class="layui-table" lay-size="sm">
                <thead></thead>
                <tbody></tbody>
            </table>
        </div>
    </div>
</section>

<script src="${ctx}/statics/libs/layuiExt/xm-select.js"></script>
<script src="${ctx}/statics/libs/jQuery.print.min.js?v=${v}"></script>
<script>
    layui.use(['layer','util','laydate','form','table','soulTable'], function () {
        let layer = layui.layer;
        let util = layui.util;
        let laydate = layui.laydate;
        let form = layui.form;
        let table = layui.table;
        let soulTable = layui.soulTable;

        laydate.render({
            elem: '#startTime',
            format: 'yyyy-MM-dd HH:mm:ss',
            trigger: 'click',
            type: 'datetime',
            value: new Date()
        });
        laydate.render({
            elem: '#endTime',
            format: 'yyyy-MM-dd HH:mm:ss',
            trigger: 'click',
            type: 'datetime',
            value: new Date()
        });

        let xmSelectConf = xmselectConf();
        let stationArr = [
            {stationName: 'FQC-1', id: 1},
            {stationName: 'FQC-2', id: 2},
            {stationName: 'FQC-A', id: 3},
            {stationName: 'FQC-G', id: 4},
            {stationName: 'FQC-F', id: 5},
            {stationName: 'FQC-T', id: 6}
        ];
        xmSelect.render({
            el: '#station',
            name: 'stationIds',
            prop: {
                name: 'stationName',
                value: 'id',
            },
            data: stationArr,
            ...xmSelectConf,
        });

        let typeArr = [
            {typeName: 'AC0210', id: 'AC0210'},
            {typeName: 'AC0211', id: 'AC0211'},
            {typeName: 'AC0212', id: 'AC0212'},
            {typeName: 'AC0213', id: 'AC0213'},
        ];
        xmSelect.render({
            el: '#type',
            name: 'typeIds',
            prop: {
                name: 'typeName',
                value: 'id',
            },
            data: typeArr,
            ...xmSelectConf,
        });

        form.on('submit(formSearch)', function(data){
            console.log(data.field) //当前容器的全部表单字段，名值对形式：{name: value}
            renderDataTable(dataObj);
            return false; //阻止表单跳转。如果需要表单跳转，去掉这段即可。
        });

        let dataObj = {
            elm: 'dataTable',
            cols: [
                {field: 'type',title: '型别', merge: true},
                {field: 'chanliang',title: '产量'},
                {field: '07/01',title: '07/01'},
                {field: '07/02',title: '07/02'},
                {field: '07/03',title: '07/03'},
                {field: '07/04',title: '07/04'},
            ],
            data: [
                {'type': 'Total', 'chanliang': '產量(Lot)','07/01': 54,'07/02': 54,'07/03': 54,'07/04': 54},
                {'type': 'Total', 'chanliang': '產量(Mpcs)','07/01': 54,'07/02': 54,'07/03': 54,'07/04': 54},
                {'type': 'AC0210', 'chanliang': '產量(Lot)','07/01': 10,'07/02': 10,'07/03': 10,'07/04': 10},
                {'type': 'AC0210', 'chanliang': '產量(Mpcs)','07/01': 11,'07/02': 11,'07/03': 11,'07/04': 11},
                {'type': 'AC0402', 'chanliang': '產量(Lot)','07/01': 44,'07/02': 44,'07/03': 44,'07/04': 44},
                {'type': 'AC0402', 'chanliang': '產量(Mpcs)','07/01': 43,'07/02': 43,'07/03': 43,'07/04': 43},
            ]
        };


        function renderDataTable(dataObj){
            let dataTable = table.render({
                elem: '#dataTable'
                , id: 'dataTable'
                , size: 'sm'
                , data: dataObj.data
                , size: 'sm'
                , cols: [dataObj.cols]
                , limit: 20
                , done: function(){
                    soulTable.render(this);

                    // 将layui table（数据表格） 复制生成普通table，用于打印
                    let head = $('div[lay-id="' + dataObj.elm + '"] .layui-table-header thead').clone(false);
                    $('.' + dataObj.elm + ' table thead').html(head.html());
                    if (dataObj.data.length == 0) {
                        $('.' + dataObj.elm + ' table').append(`<tr><td colspan="${dataObj.cols.length}" style="text-align: center;">无数据</td></tr>`);
                    } else {
                        $('.' + dataObj.elm + ' table').append($('div[lay-id="' + dataObj.elm + '"] .layui-table-body tbody').html());
                        $('.' + dataObj.elm + ' table tbody').append($('div[lay-id="' + dataObj.elm + '"] .layui-table-total tbody').html());
                    }
                }
            });

            // 前端导出
            $('.exportBtn').click(function () {
                soulTable.export(dataTable,{filename: '產量.xlsx'});
            });
        }
        // 打印
        $('.printBtn').click(function () {
            $(".fourthPage").print(printConfig());
        })
    })
</script>
</body>
</html>
